<style>
    .handle_log{
        font-size: 13px !important;
        font-family: Tahoma,Geneva, Helvetica, sans-serif !important;;
    }
    .left{
        float: left;
    }
    .dept {
        padding: 10px;
        border: 1px solid #ddd;
        position: absolute;
        width: 150px;
        left: -190px;
        box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.12);
    }
    .record {
        padding: 10px;
        border: 1px solid #ddd;
        margin: 17px;
        min-height: 40px;
        box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.12);
    }

    .record-arrow {
        position: absolute;
        width: 24px;
        height: 14px;
        background: url(/static/image/bg_dot_left3.png) no-repeat;
        top: 15px;
        left: -6px;
        text-indent: -9999em;
    }
    .record .auther {
        text-align: right;
        padding: 5px 0px;
        color: #9E9C9C;
    }
</style>

<div class="handle_log">
    <div class="left" style="width: 240px;height: 200px">
    </div>
    <div class="left" style="border-left:2px dashed #ddd;width:70%;">
        {% for item in response.message %}
            <div style="position: relative">
            <div class="dept">
                {{ item.dept }}
            </div>
            <div class="record-arrow"></div>
            <div class="record">
                {{ item.name }}
                <div class="auther">
                <span><i class="fa fa-user"></i></span>
                <span>自动采集</span>
                </div>
            </div>
            </div>

        {% endfor %}
    </div>
</div>